import React from 'react'
import PropTypes from 'prop-types'
import { View, LayoutAnimation, Text } from 'react-native'
import { ScaleT, ScaleS } from 'src/utils/ScreenUtil'
import CustomImageSize from 'src/components/image/CustomImageSize'
import CompanyTouchableOpacity from '../mine-company/components/CompanyTouchableOpacity'
import showPicker from 'src/utils/PickerUtil'
import styles from 'src/pageB/main/main-page/css/CompanyBodyCss'
import { ImageHost } from 'src/config/index'
import ImageOverlap from 'src/components/image-overlap/index'
import CustomImage from 'src/components/image/CustomImage'
import BasePage from 'src/pageP/base/base-page/index'
import { connect } from 'react-redux'
const mapActiontoProps = dispatch => ({})
@connect(
  ({ userinfo, BMineCenterStore }) => {
    return {
      haveCompanyApply: BMineCenterStore.haveCompanyApply,
      userinfo,
      userinfoB: userinfo.B,
      ...BMineCenterStore
    }
  },
  mapActiontoProps
)
class CompanyInfo extends BasePage {
  constructor(props) {
    super(props)
    this.state = {
      header: {},
      customInputLabels: false
    }
  }

  Album = companyPicUrl => (<ImageOverlap images={companyPicUrl.map((imgUrl) => ({ imgUrl }))} />)

  onClick = () => {
    const type = !this.state.customInputLabels
    this.setState({
      customInputLabels: type
    })
    if (type) {
      LayoutAnimation.spring()
    } else {
      LayoutAnimation.easeInEaseOut()
    }
  }

  childRender() {
    const {
      jumpFn,
      CommonInputPage,
      companyId
    } = this.props.navigation.state.params
    const { data = {} } = this.props
    const { companyPicUrl = [], canNotEdit } = data
    return (
      <View style={styles.body}>
        <View>
          <View style={styles.touchableOpacity}>
            <CompanyTouchableOpacity
              onPress={() =>
                jumpFn('BusinessAddress', {
                  data: { ...data, address: data.addressDetail },
                  title: '企业地址'
                })
              }
              style={styles.companyTouchableOpacity}
              titleStyle={styles.titleStyle}
              valueStyle={styles.valueStyle}
              title="企业地址"
              value={data.addressSimple || data.addressDetail || '去添加'}
              url={require('@/imgC/userinfo/arrow_black_right.png')}
            >{canNotEdit && <CustomImage style={styles.lock} source={require('@/imgC/company/lock.png')} />}</CompanyTouchableOpacity>
            <CompanyTouchableOpacity
              onPress={() =>
                CommonInputPage(
                  'CommonInputPage',
                  {
                    title: '企业简介',
                    desc: '*不能填联系方式以及特殊符号',
                    placeholder: '请输入企业简介',
                    phoneReg: '手机号验证',
                    maxLength: 2000,
                    multiline: true,
                    value: data.companyInfo
                  },
                  'companyInfo',
                  companyId
                )
              }
              style={styles.companyTouchableOpacity}
              titleStyle={styles.titleStyle}
              valueStyle={styles.valueStyle}
              title="企业简介"
              value={(data.companyInfo || '').length || '去填写'}
              url={require('@/imgC/userinfo/arrow_black_right.png')}
            >
              {canNotEdit && <CustomImage style={styles.lock} source={require('@/imgC/company/lock.png')} />}
            </CompanyTouchableOpacity>
            <CompanyTouchableOpacity
              onPress={() =>
                jumpFn('BusinessIndustry', {
                  companyAbout: data.companyAbout
                })
              }
              style={styles.companyTouchableOpacity}
              titleStyle={styles.titleStyle}
              valueStyle={styles.valueStyle}
              title="行业"
              value={data.companyAbout || '请选择'}
              url={require('@/imgC/userinfo/arrow_black_right.png')}
            >
              {canNotEdit && <CustomImage style={styles.lock} source={require('@/imgC/company/lock.png')} />}
            </CompanyTouchableOpacity>
            <CompanyTouchableOpacity
              params={1}
              onPress={this._birthFieldClick}
              style={styles.companyTouchableOpacity}
              titleStyle={styles.titleStyle}
              valueStyle={styles.valueStyle}
              title="融资阶段"
              value={data.companyFinance || '请选择'}
              url={require('@/imgC/userinfo/arrow_black_right.png')}
            >
              {canNotEdit && <CustomImage style={styles.lock} source={require('@/imgC/company/lock.png')} />}
            </CompanyTouchableOpacity>
            <CompanyTouchableOpacity
              params={2}
              onPress={this._birthFieldClick}
              style={styles.companyTouchableOpacity}
              titleStyle={styles.titleStyle}
              valueStyle={styles.valueStyle}
              title="人员规模"
              value={data.companyPerson || '请选择'}
              url={require('@/imgC/userinfo/arrow_black_right.png')}
            >
              {canNotEdit && <CustomImage style={styles.lock} source={require('@/imgC/company/lock.png')} />}
            </CompanyTouchableOpacity>
          </View>
        </View>
      </View>
    )
  }
  renderNavigationBarChild = () => { }
  toggleMask = showMask => {
    this.setState({
      showMask
    })
  }

  _birthFieldClick = type => {
    if (this.props.navigation.state.params.slaveCompanyCheck()) {
      return
    }
    this.toggleMask(true)
    const {
      getData,
      data: { companyFinance, companyPerson },
      companyId
    } = this.props.navigation.state.params
    const years =
      type === 1
        ? ['未融资', '天使轮', 'A轮', 'B轮', 'C轮', 'D轮以上']
        : [
          '0-20人',
          '20-99人',
          '100-499人',
          '500-999人',
          '1000-9999人',
          '10000人以上'
        ]
    const pickerData = years
    const selectedValue =
      type === 1 ? [companyFinance || '未融资'] : [companyPerson || '100-499人']
    const pickerTitleText = type === 1 ? '融资阶段' : '人员规模'
    showPicker({
      pickerData,
      selectedValue,
      pickerTitleText,
      onConfirm: ([gmtBorth]) => {
        const item =
          type === 1
            ? { companyFinance: gmtBorth }
            : { companyPerson: gmtBorth }
        getData(item, item, this.toggleMask, companyId, true)
      }
    })
  }
}
export default CompanyInfo